<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扣分</title>
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="info">
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="考察单位">
                <el-input v-model="searchForm.unit" placeholder="考察单位"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="search" @click="searchClick">查询</el-button>
                <el-button type="success" icon="el-icon-back" @click="back">返回</el-button>
                <el-button type="success"  icon="el-icon-share" @click="daoChu">导出数据</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            height="530px"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection">
        </el-table-column>
        <el-table-column
                type="index"
                width="50"
                label="序号"
        >
        </el-table-column>
        <el-table-column
                prop="name"
                label="考察单位">
        </el-table-column>
        <el-table-column
                prop="cpscore"
                label="扣分">
        </el-table-column>
        <el-table-column
                prop="shtime"
                label="时间">
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
        <el-col :span="24">
            <el-pagination
                    style="float: right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"><!--total表示总条数   :page-size分页的大小   @size-change每页多少条  @current-change当前页数  :current-page当前页数-->
            </el-pagination>
        </el-col>
    </div>


</div>

</body>
<script>
    var vm=new Vue({
        el:"#info",
        data:{
            //弹框标题
            title:'',
            //表格数据
            tableData:[],
            //分页大小
            pageSize:5,
            //总条数
            total:100,
            //当前页数
            currentPage:1,
            //获取设置搜索的值
            searchForm:{
                name:""
            },
            //多选值
            multipleSelection: []
        },
        created:function(){
            var self=this;
            var start=(this.currentPage-1)*this.pageSize;
            axios.post("/kf/selectPass",{"start":start,"pageSize":this.pageSize}).then(function(respones){
                self.tableData=respones.data.data;
                self.total=respones.data.total;
            })
        },
        methods:{
            //查询
            searchClick:function(){
                var self=this;
                var start=0;
                axios.post("/kf/selectPass",{"start":start,"pageSize":this.pageSize,"inspection":this.searchForm.inspection}).then(function(respones){
                    self.tableData=respones.data.data;
                    self.total=respones.data.total;
                });
            },
            //存储选中的值
            handleSelectionChange:function(val){
                this.multipleSelection=val;
            },
            //导出
            daoChu:function(){
                var selectChange=this.multipleSelection;
                if(selectChange.length>0){
                    axios.post("../kf/koufenData",{"xinxi":selectChange}).then(function(response){
                        if(response.data==1){
                            location.href="../kf/export"
                        }
                    });
                }else{
                    this.$message({
                        message:'请至少选中一个',
                        type:'error'
                    });
                }
            },
            //返回
            back:function(){
                location.href="../statistics/go";
            },
            handleSizeChange(val) {
                //每页条数修改事件
                this.pageSize=val;
                this.loadTable();
                console.log('每页 ${val} 条');
            },
            handleCurrentChange(val) {
                //当前页
                this.currentPage=val;
                this.loadTable();
                console.log('当前页: ${val}');
            }
        }
    })
</script>
</html>